<template>
  <MenuLayout>
    <template #content>
      <div>
        <div class="row-spaceb mg20">
          <p class="fwbold fs-md">· 服务补贴申请兑付</p>
          <el-button type="danger" size="mini" plain @click="$router.back()">返回</el-button>
        </div>
        <el-divider></el-divider>
        <div class="card">
          <!--          时间线-->
          <el-steps :active="2" class="mg30 ml80 mr80" align-center>
            <el-step :title="item.title" v-for="(item, index) in activities" :key="index">
              <template #icon>
                <p>{{ index + 1 }}</p>
              </template>
            </el-step>
          </el-steps>
          <!--          订单信息-->
          <div class="mt40 mb40">
            <div class="mg20 fs-md fwbold">订单信息</div>
            <el-table size="medium" :data="orderList" border :header-cell-style="{background:'rgb(252, 241, 231)',color:'#606266'}">
              <el-table-column prop="no" label="订单编号"></el-table-column>
              <el-table-column prop="name" label="服务产品名称"></el-table-column>
              <el-table-column prop="department" label="服务企业"></el-table-column>
              <el-table-column prop="serviceTime" label="服务完成时间"></el-table-column>
              <el-table-column prop="amount" label="合同金额(元)"></el-table-column>
              <el-table-column prop="bidamount" label="拟兑付金额(元)"></el-table-column>
              <el-table-column label="服务状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.state == 1">已完成</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--          补贴兑付申请表单-->
            <div class="mb20 fwbold fs-md center">2025年服务券补贴兑付申请表单</div>
            <div class="pr10 tr fs-sm mb20">扩展名：pdf、png、jpg、xls、xlsx、doc、docx。单个文件5M以内</div>
            <el-table size="medium" :data="formList" border stripe :header-cell-style="{background:'rgb(252, 241, 231)',color:'#606266'}">
              <el-table-column prop="no" label="序号" width="60px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="所需材料"></el-table-column>
              <el-table-column label="操作" width="120px" align="center">
                <template slot-scope="scope">
                  <el-button type="text" v-if="scope.row.state == 1">点击查看</el-button>
                  <el-button type="text" v-if="scope.row.state == 0">点击上传</el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
        <div class="mt20">
          <el-form :model="supplyData" class="width-24 center" ref="supplyForm" :rules="supplyRules" size="medium" label-width="100px" label-suffix=":">
            <el-col span="12">
              <el-form-item label="审核结果" prop="result">
                <el-radio-group v-model="supplyData.result">
                  <el-radio :label="1">审核通过</el-radio>
                  <el-radio :label="2">退回修改</el-radio>
                  <el-radio :label="3">审核不通过</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="审核意见">
               <el-input type="textarea" placeholder="请输入审核意见" v-model="supplyData.remark"  :autosize="{ minRows: 2, maxRows: 6}" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <div class="width-24 tc mt40 mb40">
          <el-button  @click="$router.back()" type="danger" size="medium">提交申请</el-button>
        </div>
      </div>
    </template>
  </MenuLayout>
</template>
<script>
import MenuLayout from '@/components/MenuLayout'
import TimeLine from "@/components/timeLine.vue";

export default {
  data() {
    return {
      activeIndex: '1',
      activities: [
        {
          title: '服务商申请',
          done: true,
        },
        {
          title: '等待审核',
          done: false,
        },
        {
          title: '申请成功',
          done: false,
        }
      ],
      orderList: [
        {
          no: "FWQ212523",
          name: '小微企业智慧产销管理系统',
          department: '广西中小企业1',
          serviceTime: '2024-08-05 12:00:00',
          amount: '14000',
          bidamount: '6000',
          state: 1
        }
      ],
      formList: [
        {name: '服务合同', state: 1},
        {name: '支付凭证', state: 0}
      ],
      supplyData: {},
      supplyRules: {
        result: [{required: true, message: '审核结果不能为空', trigger: 'change'}]
      }
    }
  },
  components: {
    TimeLine,
    MenuLayout
  }
}
</script>
<style scoped lang="scss">
p {
  margin: 0;
  padding: 0;
}
:deep .el-divider--horizontal {
  margin: 12px 0;
}
:deep(.el-step__title.is-finish) {
  color: #FF0000;
}
:deep(.el-step__head.is-finish) {
  color: #FF0000;
  border-color: #FF0000;
}
:deep(.el-step__line-inner) {
  border-style: dashed;
}
:deep(.el-step__title.is-process) {
  font-weight: 400;
  color: rgb(122,121,121);
}
:deep(.el-step__title.is-wait) {
  color: rgb(122,121,121);
}
/deep/.el-radio.is-checked .el-radio__inner {
  border-color: #D32521;
  background-color: #D32521;
  color: #D32521;
}
/deep/ .el-radio.is-checked .el-radio__label {
  color: #D32521;
}
</style>
